<template>
    <div class="package" v-if="data.title !== '自定义'">
        <div class="top">
            <h1>{{props.data.title}}</h1>
            <b class=" text-orange-500">￥{{props.data.amount}}</b>
        </div>
        <div>
            <!-- 共：1积分⚡<br>
            有效天数：1 天<br> -->
            可以进行外部链接购买，发送兑换码，然后用户使用兑换码进行核销，套餐介绍也支持HTML 新窗口打开本页
        </div>
        <div class="bottom">
            <n-button type="primary" @click="toPay">立即购买</n-button>
        </div>
    </div>

    <div class="package !w-full" v-else>
        <div class="top">
            <h1>{{props.data.title}}</h1>
            <b class=" text-orange-500">￥{{props.data.amount}}</b>
        </div>
        <n-input-group>
            <n-input-number :precision="0" size="large" :style="{ width: '100%' }" v-model:value="props.data.amount" placeholder="输入金额" />
            <n-button ghost size="large" @click="toPay"> 立即充值 </n-button>
        </n-input-group>
    </div>
    
    <!-- zhif -->
    <PayModel v-model:show="showModal" :paymentDetail="props.data" />
</template>
<script setup>
import { ref,defineProps } from 'vue';
import { NButton,NInputGroup,
    NInputNumber, } from "naive-ui";
import PayModel from "@/components/payModel/index.vue";

const props = defineProps({
    data: Object
})

const customAmount = ref();
const showModal = ref(false);
const toPay = async ()=>{
    showModal.value = true;
}

</script>
<style scoped>
.package {
    border: 1px solid #ccc;
    border-radius: 10px;
    width: 48%;
    padding: 10px 14px;
}

.package .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    margin-bottom: 10px;
}

.package .bottom {
    text-align: center;
    margin-top: 10px;
}
</style>
